<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        height: 100%;
        width: 100%;
        background-color: aqua;
        display: flex;
        align-items: center;
      }
      .container {
        margin: 0 auto;
        width: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      img {
        width: 300px;
      }
      P {
        font-size: 24px;
      }
      .circle {
        display: flex;
        width: 300px;
        justify-content: space-around;
      }
      .circle li {
        list-style-type: circle;
        font-size: 30px;
      }
      .circle .active {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="./images/image0.jpg" />
      <p>黑桃A</p>
      <div class="circle">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </div>
      <button class="left">6666</button>
      <button class="right">7777</button>
    </div>
    <script>
      let n = 0;
      let arr = [
        { url: "./images/image0.jpg", title: "黑桃A" },
        { url: "./images/image1.jpg", title: "黑桃2" },
        { url: "./images/image2.jpg", title: "黑桃3" },
        { url: "./images/image3.jpg", title: "黑桃4" },
        { url: "./images/image4.jpg", title: "黑桃5" },
      ];
      const img = document.querySelector(".container img");
      const p = document.querySelector(".container p");
      let i = 0;
      const left_btn =document.querySelector(".left")
      const right_btn =document.querySelector(".right")

      left_btn.addEventListener("click", function () {
        i = i == 0 ? arr.length - 1 : --i;
        img.src = arr[i].url;
        p.innerHTML = arr[i].title;
        document.querySelector(`.circle .active`).classList.remove("active");
        document
          .querySelector(`.container .circle li:nth-child(${i + 1})`)
          .classList.add("active");
      });
      right_btn.addEventListener("click", function () {
        i = i == arr.length - 1 ? 0 : ++i;
        img.src = arr[i].url;
        p.innerHTML = arr[i].title;
        document.querySelector(`.circle .active`).classList.remove("active");
        document
          .querySelector(`.container .circle li:nth-child(${i + 1})`)
          .classList.add("active");
      }); 
      let timeID = setInterval(function(){right_btn.click()}, 1000);
      img.addEventListener("mouseenter",function(){clearInterval(timeID)})
      img.addEventListener("mouseleave",function(){timeID = setInterval(function(){right_btn.click()}, 1000);})
    </script>
  </body>
</html>
